import React from 'react'
import {connect} from 'dva'
import {Menu, Dropdown} from 'antd'
import {Icon} from '../../../common/index'

import styles from '../index.less'

@connect(({user}) => ({
  list: user.data.warehouse,
  wareRoomId: user.wareRoomId
}))
class WareHouseSelect extends React.Component {

  onMenuClick = ({key}) => {
    const {list = [], dispatch} = this.props
    const current = list.find(item => Number(item.id) === Number(key))
    dispatch({
      type: 'login/warehouseId',
      payload: current ? current.id : ''
    })
  }

  renderMenu = () => {
    const {list = []} = this.props
    return (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {list.map(item => (
          <Menu.Item key={item.id}>{item.name}</Menu.Item>
        ))}
      </Menu>
    )
  }

  getSelect = () => {
    const {wareRoomId} = this.props
    const {list} = this.props
    if (!list) return ''
    const current = list.find(item => item.id == wareRoomId) // eslint-disable-line
    return current ? current.name : ''
  }

  render() {
    const name = this.getSelect()
    return (
      <Dropdown overlay={this.renderMenu()}>
        <div className={styles.inline}>
          <Icon style={{marginRight: 10}} type='cangkux' />
          <span style={{marginRight: 10}} className='pointer'>{name || '没有仓库'}</span>
        </div>
      </Dropdown>
    )
  }
}

export default WareHouseSelect
